<template>
    <div class="shell">
        <div class="container a-container is-txl" id="a-container">
            <form action="" method="" class="form" id="a-form">
                <h2 class="form_title title">创建账号</h2>
                <span class="form_span">输入手机号进行注册</span>
                <input type="text" class="form_input" placeholder="输入用户名" v-model="regInfo.username">
                <input type="password" class="form_input" placeholder="输入密码" v-model="regInfo.password">
                <input type="password" class="form_input" placeholder="确认密码" v-model="regInfo.rePassword">
                <div class="phone">
                    <input type="text" class="form_input in" placeholder="手机号" v-model="regInfo.phone">
                    <button class="button yzm" @click.prevent="countDown" :disabled="counting"
                        v-if="!counting">发送验证码</button>
                    <button class="button yzm" v-else>{{ reTime }}S重新发送</button>
                </div>
                <input type="text" class="form_input" placeholder="输入验证码" v-model="regInfo.authcode">
                <button class="form_button button submit" @click="register">SIGN UP</button>
            </form>
        </div>

        <div class="container b-container is-txl is-z" id="b-container">
            <form action="" method="" class="form" id="b-form">
                <h2 class="form_title title">登入账号</h2>
                <span class="form_span">输入账户和密码</span>
                <input type="text" class="form_input" placeholder="输入手机号" v-model="logInfo.phone">
                <input type="password" class="form_input" placeholder="输入密码" v-model="logInfo.password">
                <a class="form_link">忘记密码？</a>
                <button type="submit" class="form_button button submit" @click.prevent="login">SIGN IN</button>
            </form>
        </div>

        <div class="switch is-txr" id="switch-cnt">
            <div class="switch_circle"></div>
            <div class="switch_circle switch_circle-t"></div>
            <div class="switch_container" id="switch-c1">
                <h2 class="switch_title title" style="letter-spacing: 0;">Welcome Back！</h2>
                <p class="switch_description description">已经有账号？，去登入</p>
                <button class="switch_button button switch-btn">SIGN IN</button>
            </div>

            <div class="switch_container is-hidden" id="switch-c2">
                <h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend！</h2>
                <p class="switch_description description">没有账号？去注册</p>
                <button class="switch_button button switch-btn">SIGN UP</button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import axios from 'axios';
//导入转化formData类型的模块
import qs from "qs";
import { useRouter } from 'vue-router'
//导入pinia的store
import { useMainStore } from '@/stores/piniaStore/index'
const stores = useMainStore()
//实现点击切换功能
onMounted(() => {
    let switchCtn = document.querySelector("#switch-cnt");
    let switchC1 = document.querySelector("#switch-c1");
    let switchC2 = document.querySelector("#switch-c2");
    let switchCircle = document.querySelectorAll(".switch_circle");
    let switchBtn = document.querySelectorAll(".switch-btn");
    let aContainer = document.querySelector("#a-container");
    let bContainer = document.querySelector("#b-container");
    let changeForm = (e: Event) => {
        e.preventDefault();
        (<Element>switchCtn).classList.add("is-gx");
        setTimeout(function () {
            (<Element>switchCtn).classList.remove("is-gx");
        }, 1500);
        (<Element>switchCtn).classList.toggle("is-txr");
        switchCircle[0].classList.toggle("is-txr");
        switchCircle[1].classList.toggle("is-txr");

        (<Element>switchC1).classList.toggle("is-hidden");
        (<Element>switchC2).classList.toggle("is-hidden");
        (<Element>aContainer).classList.toggle("is-txl");
        (<Element>bContainer).classList.toggle("is-txl");
        (<Element>bContainer).classList.toggle("is-z");
    }
    for (var i = 0; i < switchBtn.length; i++) {
        switchBtn[i].addEventListener("click", changeForm)
    }

})
//实现登录功能
const logInfo = ref({
    phone: "",
    password: ""
})
const router = useRouter()
function login() {
    const data = qs.stringify(logInfo.value);
    axios.post('http://127.0.0.1:3007/api/login', data)
        .then(response => {
            if (response.data.status === 0) {
                // 向本地存储中添加登录状态
                localStorage.setItem("login", String(true))
                // 向pinia的store中传递响应式数据用于实时刷新
                stores.login = true
                router.push("/")
            } else {
                console.log(response.data);
            }
        })
        .catch(error => { console.error(error) }
        )
}
//实现发送验证码功能
const counting = ref(false)
const reTime = ref(60)
const regInfo = ref({
    username: '',
    phone: '',
    password: '',
    rePassword: '',
    authcode: ''
})
function countDown() {
    counting.value = true
    const countdownTimer = setInterval(() => {
        if (reTime.value > 0) {
            reTime.value--
        } else {
            clearInterval(countdownTimer)
            counting.value = false
        }
    }, 1000)
    const phone = {
        phone: regInfo.value.phone
    }
    const data = qs.stringify(phone)
    axios.post('http://127.0.0.1:3007/api/authcode', data).then(response => {
        if (response.data.status !== 0) {
            alert("验证码发送失败")
        }
    })
}
// 实现注册功能
function register() {
    const data = qs.stringify(regInfo.value)
    axios.post('http://127.0.0.1:3007/api/register', data).then(response => {
        if (response.data.status === 0) {
            regInfo.value.password = ''
            regInfo.value.phone = ''
            regInfo.value.rePassword = ""
            regInfo.value.username = ''
            alert("注册成功")
        }
    })
}

</script>

<style scoped>
@import "@/styles/logReg/logReg.css";
</style>